<template>
  <div class="official">
    <div
      class="mtop-10 mbottom-20"
      v-for="item in topList"
      :key="item.id"
    >
      <!-- <a-skeleton
        active
        :loading="loading"
        :paragraph="{ rows: 5 }"
        :title='false'
        :avatar="{ size: 'large', shape: 'square' }"
      > -->
        <div class="guanfang">
          <div class="left-img img-border">
            <img class="img-percent" v-lazy="item.coverImgUrl">
          </div>
          <!-- <official-item :tracks="get5Track(item.tracks)"></official-item> -->
          <ul class="right-song mleft-30">
            <li
              v-for="(iten, index) in get5Track(item.tracks)"
              :key="iten.id"
            >
              <span class="mleft-10" :class="{ 'first-three': index < 3 }">
                {{ index + 1 }}
              </span>
              <span class="mleft-10 text-hidden">{{ iten.name }}</span>
              <div class="mright-10 end">
                <span v-for="(_, index) in iten.ar" :key="_.id">
                  {{ index === iten.ar.length - 1 ? _.name : `${_.name} / ` }}
                </span>
              </div>
            </li>
          </ul>
        </div>
        <div class="look-all pointer" @click="goDetail(item.id)">
          查看全部<a-icon type="right" />
        </div>
      <!-- </a-skeleton> -->
    </div>
  </div>
</template>

<script>

export default {
  name: 'Official',

  components: {
    
  },
  
  props: {
    topList: {
      type: Array,
      default() {
        return []
      }
    }
  },

  data() {
    return {
      // 骨架屏显示
      // loading: true
    };
  },

  mounted() {

  },

  methods: {
    get5Track(list) {
      return list.slice(0, 5);
    },
    goDetail(id) {
      this.$router.push({
        name: 'playlistdetail',
        query: { id }
      })
    }
  },

  // render(h) {
  //   return h('div', {
  //     attrs: {
  //       id: 'official'
  //     }
  //   })
  // }
};
</script>

<style lang="less" scoped>
.official {
  .guanfang {
    display: flex;
    height: 160px;
    .left-img {
      position: relative;
      width: 160px;
      height: 100%;
      overflow: hidden;
    }
    .right-song {
      flex: 1;
      li {
        height: 32px;
        line-height: 32px;
        &:nth-child(3) {
          background-color: #efefef;
        }
        &:hover {
          background-color: #f4f4f4;
        }
        .end {
          float: right;
          color: #9b9b9b;
        }
        .first-three {
          color: red;
        }
      }
    }
  }
  .look-all {
    padding-top: 6px;
    color: #676767;
    margin-left: 190px;
    &:hover {
      color: #373737
    };
  }
}
</style>